{extend name="base" /}
{block name="content"}
<div class="m-b-md">
    <h2 class="m-b-none">商品添加</h2>
</div>
<section class="panel panel-default">
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" name="gname" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" name="gnumber" class="form-control">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="0" tid="-1">请选择</option>
                        {foreach name="treeCategoryData" item="v"}
                        <option value="{$v['cid']}" tid="{$v['tid']}">{$v['_cname']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--异步回去规格和属性【商品详情页面的规格参数+下单选择颜色尺码】-->
            <script>
                $(function(){
                    //1.抓取下拉框
                    $('select[name=cid]').change(function(){
                        //2.获取选中那一项的tid
                        var tid= $(":selected").attr('tid');
                        $('.hidden').val(tid);
                        //3判断tid的值
                        if(tid== 0){
                            alert('不能选择顶级分类');
                            //4.默认选择第一个
                            $('select[name=cid] option:first').prop("selected", "selected");
                            return
                        }
                        //5.发送数据到后台
                        $.ajax({
                            type:'post',
                            url:"{:url('getAttr')}",
                            data:{tid:tid},
                            dataType:'json',
                            success:function (res) {
                                var attr='';
                                var spec='';
                                $.each(res,function(k,v){
                                    if(v.class==2){
                                        //属性
                                        attr += '<tr><td>'+v.taname+'</td>';
                                        attr += '<td><select name="attr['+v.taid+']" ><option value="0">请选择</option>';
                                        $.each(v.tavalue,function (kk,vv) {
                                            attr += '<option value="'+vv+'">'+vv+'</option>';
                                        })
                                        attr += '</select></td></tr>';
                                    }else{
                                        spec += '<tr><td>'+v.taname+'</td>';
                                        spec += '<td><select name="spec['+ v.taid+'][color][]"><option value="0">请选择</option>';
                                        $.each(v.tavalue,function (kk,vv) {
                                            spec += '<option value="'+vv+'">'+vv+'</option>';
                                        })
                                        spec += '</select></td>';
                                        spec += '<td>附加价格</td>';
                                        spec += '<td><input type="text" name="spec['+ v.taid+'][added][]"></td>';
                                        spec += '<td><button type="button" class="btn btn-success btn-xs addSpec">追加</button></td></tr>';
                                    }
                                })
                                $('#attr').html(attr);
                                $('#spec').html(spec);
                            }
                        })
                    })
                })
            </script>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">

                        <!--<tr>-->
                            <!--<td>袖长</td>-->
                            <!--<td>-->
                                <!--<select name="attr['+v.taid+']" >-->
                                    <!--<option value="0">请选择</option>-->
                                    <!--<option value="无袖">无袖</option>-->
                                    <!--<option value="短袖">短袖</option>-->
                                <!--</select>-->
                            <!--</td>-->
                        <!--</tr>-->
                    </table>
                </div>
            </div>
            <!--点击添加规格按钮，追加一个-->
            <!--<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>-->
            <script>
                $(function () {
                    //点击追加
                    $('#spec').delegate('.addSpec','click',function () {
                        //1.把当前的tr克隆一份
                        var newTr = $(this).parents('tr').clone();
                        //3.将添加按钮改成删除的
                        var del = '<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>';
                        newTr.find('td').last().html(del);
                        //2.追加
                        $(this).parents('tr').after(newTr);
                    })
                    //删除
                    $('#spec').delegate('.delSpec','click',function () {
                        $(this).parents('tr').remove();
                    })
                })
            </script>

            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                        <!--<tr>-->
                            <!--<td>颜色</td>-->
                            <!--<td>-->
                                <!--<select name="spec['+ v.taid+'][color][]">-->
                                    <!--<option value="0">请选择</option>-->
                                    <!--<option value="红色">红色</option>-->
                                    <!--<option value="蓝色">蓝色</option>-->
                                <!--</select>-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--附加价格-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<input type="text" name="spec['+ v.taid+'][added][]">-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<button type="button" class="btn btn-success btn-xs addSpec">追加</button>-->
                            <!--</td>-->
                        <!--</tr>-->
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option value="0">请选择</option>
                        {foreach name="brandData" item="v"}
                        <option value="{$v['bid']}">{$v['bname']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>


            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input type="text" name="company" class="form-control" id="input-id-1" value="件">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" name="market_price" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="number"  class="form-control" name="shop_price" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="click" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="stock" placeholder="">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <!--引入uploadify相关js、css-->
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control" name="pic" readonly="" value="">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <div class="input-group" style="margin-top:5px;">
                        <img src="__STATIC__/Admin/images/nopic.jpg" class="img-responsive img-thumbnail" width="150">
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                    </div>
                </div>
                <script>
                    //上传图片
                    function upImage(obj) {
                        require(['util'], function (util) {
                            options = {
                                multiple: false,//是否允许多图上传
                                //data是向后台服务器提交的POST数据
                                data:{name:'后盾人',year:2099},
                            };
                            util.image(function (images) {          //上传成功的图片，数组类型 
                                $("[name='pic']").val(images[0]);
                                $(".img-thumbnail").attr('src', images[0]);
                            }, options)
                        });
                    }

                    //移除图片
                    function removeImg(obj) {
                        $(obj).prev('img').attr('src', '__STATIC__/Admin/images/nopic.jpg');
                        $(obj).parent().prev().find('input').val('');
                    }
                </script>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <button onclick="upManyImage(this)" class="btn btn-default" type="button">选择图片</button>
                    <script>
                        //上传图片
                        function upManyImage(obj) {
                            require(['util'], function (util) {
                                options = {
                                    //上传多图
                                    multiple: true,
                                };
                                util.image(function (images) {
                                    $(images).each(function(k,v){
                                        $("<img style='width:80px' src='"+v+"'/><input type='hidden' name='img[]' value='"+v+"'/>").appendTo('#box');
                                    })
                                }, options)
                            });
                            }
                    </script>
                </div>
                <div class="col-sm-8" id="box"></div>

            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea id="container1" name="pog" style="height:300px;width:100%;"></textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container1', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            })
                        });
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea id="container" name="service" style="height:300px;width:100%;"></textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        })
                    </script>
                </div>
            </div>
            <input class="hidden" type="hidden" name="tid" value="">
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
{/block}

